Transition Events

Posted on 2023-06-29 by

In the last post we had a problem where when adding an item there's a long delay. We'll fix that in this post by using a condition :

if the list is showing, don't add a delay.

if the list is not showing, add a delay.

By doing that we can get instant feedback when adding items when the list is already showing and still get a nice transition animation when clicking to show a list.

There are four transition events we can use to accomplish this:

on:introstart
on:introend
on:outrostart
on:outroend

So we can just add this code

on:introend={() => {
  list.shown = true;
}}
on:outroend={() => {
  list.shown = false;
}}

and then use the condition in the transition:

in:fly|global={{ x: 60, delay: list.shown ? 0 : 400 + index * 300 }}

Before fixing the issue there's a delay when adding new items.

Hall

App.svelte App2.svelte

<script>
	import { fade, blur, fly, slide, scale } from "svelte/transition";
	import { bounceInOut, sineOut } from "svelte/easing";
	import { browser } from "$app/environment";
	const data = [
		{ title: "Hall", items: ["Sweep the floor", "Mop the floor", "Throw the rubbish"] },
		{ title: "Kitchen", items: ["Wash the plates", "Tidy the table", "Boil the soup"] },
		{ title: "Toilet", items: ["Brush the sink", "Flush the toilet", "Scrub the floors"] },
	];
	let lists = [
		{ show: true, items: [0, 1] },
		{ show: false, items: [0] },
		{ show: false, items: [0, 1] },
	];
	let media;
	let noAnimation;
	if (browser) {
		media = matchMedia("(prefers-reduced-motion: reduce)");
		noAnimation = media.matches;
		media.onchange = (event) => {
			noAnimation = event.matches;
		};
	}

	function t() {
		return {
			delay: 0,
		};
	}

	$: niceFade = noAnimation ? t : fade;
</script>

<div class="containery">
	{#each lists as list, i (i)}
		{#if list.show}
			<div
				transition:niceFade={{ duration: 400 }}
				on:introend={() => {
					list.shown = true;
				}}
				on:outroend={() => {
					list.shown = false;
				}}
				class="list">
				<div class="title">{data[i].title}</div>
				<button class="close" on:click={() => (list.show = false)}>X</button>
				<ul class="items">
					{#each list.items as item, index (item)}
						<li in:fly|global={{ x: 60, delay: 400 + index * 300 }} out:slide class="item">
							<button
								on:click={() => {
									list.items = list.items.filter((i) => i !== item);
								}}>
								<span>{data[i].items[item]}</span><span class="pl-4">X</span></button>
						</li>
					{/each}
					{#if list.items.length !== 3}
						<button
							class="add-item"
							on:click={() => {
								const potential = new Set([0, 1, 2]);
								list.items.forEach((item) => potential.delete(item));
								list.items.push(Array.from(potential)[0]);
								list.items = list.items;
							}}>
							Add item
						</button>
					{/if}
				</ul>
			</div>
		{:else}
			<button class="add-list" on:click={() => (list.show = true)}>+</button>
		{/if}
	{/each}
</div>

<style>
	.containery {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
	}
	.list,
	.add-list {
		margin: 20px;
		border: 1px solid #999;
		border-radius: 4px;
		padding: 20px;
		box-shadow: 4px 4px 4px #ddd;
		position: relative;
	}
	.title {
		font-size: 18px;
		font-weight: bold;
	}
	.close {
		position: absolute;
		top: 10px;
		right: 10px;
		background: none;
		border: none;
		cursor: pointer;
	}
	.items {
		list-style: none;
		padding: 0;
		height: 250px;
	}
	.items li {
		margin-bottom: 16px;
		padding: 8px;
		border: 1px solid #999;
		border-radius: 4px;
		box-shadow: 2px 2px 2px #ddd;
		transition: all 0.5s ease;
	}
	.items li:hover {
		box-shadow: 4px 4px 4px #ddd;
	}
	.item {
		display: flex;
	}
	.item span:first-child {
		flex: 1;
	}
	.add-list {
		display: grid;
		place-items: center;
		font-size: 100px;
		cursor: pointer;
		background: rgba(0, 0, 255, 0.05);
		color: blue;
		border: none;
		box-shadow: none;
	}
	.items li.add-item {
		border: none;
		background: none;
		box-shadow: none;
		color: blue;
		text-align: center;
		background: rgba(0, 0, 255, 0.05);
	}
</style>

Note that in Svelte 4 transitions are local by default meaning that if you want children transitions to play when a parent is added you need to add the |global modifier. (For most things local transitions make more sense though)

Also note that in this App2 example there's is an annoying delay when adding new items. We will fix this in the next post!